import { Button, Input, Space } from "antd";
import { useEffect, useState } from "react";

// Hook 规则
// 只在最顶层使用 Hook ( 不要在循环、条件或嵌套函数中调用 Hook )
// 只在 React 函数中调用 Hook ( 不要在普通的 JavaScript 函数中调用 Hook )

function Counter(){
    // 注意 useState 返回一个包含两个元素的数组
    // 数组中第一个元素表示状态，第二个元素表示修改状态的函数
    const [count,setCount] = useState(0);
    const [message,setMessage] = useState('');

    const increment = () => {
        // 修改状态
        setCount( count + 1 );
    }

    const change = ( { target: { value } } ) => {
        console.log( value );
        setMessage( value );
    }

    // Similar to componentDidMount and componentDidUpdate:
    const effect = function(){
        console.log( 'effect' );

        // Similar to componentWillUnmount
        return function cleanup(){
            console.log( 'cleanup' );
        }
    }
    
    useEffect( effect , [] );

    return (
        <div style={ { border: '1px solid blue' , padding: '15px' } }>
            <Space>
                <Button type="primary" onClick={ increment }>{ count }</Button>
                <Input value={message} onChange={ change } />
            </Space>
        </div>
    )
}

export default Counter ;